<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Admin Template - Delight</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="" />
	<meta name="keywords" content="" />

	<!-- Styles -->
	<link rel="stylesheet" type="text/css" href="css/materialize.min.css" />
	<link rel="stylesheet" href="css/icons.css">
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/responsive.css" />
	<link rel="stylesheet" type="text/css" href="css/color.css" />
</head>
<body>
	<div class="loader-container circle-pulse-multiple">
		<div class="page-loader">
			<div id="loading-center-absolute">
				<div class="object" id="object_four"></div>
				<div class="object" id="object_three"></div>
				<div class="object" id="object_two"></div>
				<div class="object" id="object_one"></div>
			</div>
		</div>
	</div>
	<div class="topbar">
		<div class="logo"><a href="#" title="">DELIGHT</a></div><!-- Logo -->
		<a class="sidemenu-btn waves-effect waves-light" href="#" title=""><i class="ti-menu"></i></a><!-- Sidemenu Button -->

		<div class="dropdown">
			<a class="dropdown-button" href='#' title="" data-activates='dropdown1'>Dropdown <i class="ti-angle-down"></i></a>			
			<ul id='dropdown1' class='dropdown-content'>
				<li><a href="steps-form.html">Steps Form</a></li>
				<li><a href="contacts.html">Contacts</a></li>
				<li class="divider"></li>
				<li><a href="form-builder.html">Form Builder</a></li>
				<li><a href="tour.html">Page Tour</a></li>
				<li><a href="extra-options.html">Extra Options</a></li>
			</ul>		
		</div><!-- Dropdown -->

		<div class="activity">
			<h4 class="cd-headline clip is-full-width">
	            <span class="cd-words-wrapper">
	                <b class="is-visible"><span class="alert success">Success</span> Jessica Roy Has Just Accepted Your Friend Request ...</b>
	                <b class="is-hidden"><span class="alert warning">Warning</span> Server #405 has been crashed</b>
	                <b class="is-hidden"><span class="alert info">Info</span> Micky Merlen has sent you an email...</b>
	                <b class="is-hidden"><span class="alert error">Error</span> Server #405 is disconnected</b>
	            </span>									
			</h4>
		</div><!-- Activity -->

		<div class="topbar-links">
			<div class="notification">
				<a class="click-btn" href="#" title=""><i class="ti-bell"></i> <span>2</span></a>
				<div class="notification-dropdown z-depth-2">
					<div class="notification-top">
						<ul class="tabs">
							<li class="tab"><a class="active" href="#notification"><i class="ti-world"></i></a></li>
							<li class="tab"><a href="#task"><i class="ti-view-list-alt"></i></a></li>
							<li class="tab"><a href="#event"><i class="ti-calendar"></i></a></li>
						</ul>						
					</div>
					<div class="notification-bottom">
						<div id="notification">
							<h5>You Have 10 New Notifications</h5>
							<div class="notification-inner scroll">
								<div class="notification-box">
									<img src="http://placehold.it/48x47" alt="" />
									<div class="notification-detail">
										<h6 class="blue-text"><a href="mail-open.html" title="">Clarine Wassel</a></h6>
										<span>20 mins ago</span>
										<p><a href="mail-open.html" title="">Do you want to grab some...</a></p>
									</div>
								</div><!-- Notification Box -->
								<div class="notification-box">
									<img src="http://placehold.it/48x47" alt="" />
									<div class="notification-detail">
										<h6 class="orange-text"><a href="mail-open.html" title="">Todd Cok</a></h6>
										<span>45 mins ago</span>
										<p><a href="mail-open.html" title="">Let’s Schedule a Meeting ..</a></p>
									</div>
								</div><!-- Notification Box -->
								<div class="notification-box">
									<img src="http://placehold.it/48x47" alt="" />
									<div class="notification-detail">
										<h6 class="cyan-text"><a href="mail-open.html" title="">Jeniffer Ross</a></h6>
										<span>20 mins ago</span>
										<p><a href="mail-open.html" title="">We Are looking to hire ....</a></p>
									</div>
								</div><!-- Notification Box -->
								<div class="notification-box">
									<img src="http://placehold.it/48x47" alt="" />
									<div class="notification-detail">
										<h6 class="green-text"><a href="mail-open.html" title="">Clarine Wassel</a></h6>
										<span>20 mins ago</span>
										<p><a href="mail-open.html" title="">Do you want to grab some</a></p>
									</div>
								</div><!-- Notification Box -->
							</div>
						</div><!-- Notifications -->

						<div id="task">
							<h5>You Have 5 Tasks Pending</h5>
							<div class="task-inner scroll">
								<div class="admin-task">
									<h6>HTML5 Validation Report</h6>
									<div class="progress"><div class="determinate purple lighten-3" style="width: 70%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>Google Chrome Extentions</h6>
									<div class="progress"><div class="determinate green" style="width: 45%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>Social Intranet Projects</h6>
									<div class="progress"><div class="determinate red" style="width:86%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>Social Intranet Projects</h6>
									<div class="progress"><div class="determinate blue" style="width: 63%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>Youtube Client App</h6>
									<div class="progress"><div class="determinate yellow darken-4" style="width:78%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>HTML5 Validation Report</h6>
									<div class="progress"><div class="determinate purple lighten-3" style="width: 70%"></div></div>
								</div><!-- Admin Task -->
								<div class="admin-task">
									<h6>Google Chrome Extentions</h6>
									<div class="progress"><div class="determinate green" style="width: 45%"></div></div>
								</div><!-- Admin Task -->
							</div>
						</div><!-- Task -->

						<div id="event">
							<div class="event-inner scroll">
								<h5>6 Events are Coming This Week</h5>
								<div class="admin-event">
									<span class="orange darken-4">23 Mar</span>
									<p>Old school Red, White, and Blue satin</p>
								</div><!-- Admin Event -->
								<div class="admin-event">
									<span class="green darken-4">05 Aug</span>
									<p>Hook-and-loop closure firm assures for everyone. </p>
								</div><!-- Admin Event -->
								<div class="admin-event">
									<span class="brown darken-5">13 Jan</span>
									<p>The ideal award for the champion your event. </p>
								</div><!-- Admin Event -->
								<div class="admin-event">
									<span class="blue lighten-2">20 Oct</span>
									<p>Belt is more than 6" wide and has padded inner</p>
								</div><!-- Admin Event -->
							</div>
						</div><!-- Event -->

					</div>
				</div><!-- Notification Dropdown -->
			</div><!-- Notifications -->
			<div class="launcher">
				<a class="click-btn" href="#" title=""><i class="ti-widget"></i></a>
				<div class="launcher-dropdown z-depth-2">
					<a href="mail.html" title="" class="launch-btn"><i class="ti-comment-alt blue-text"></i> <span>Mail Box</span></a>
					<a href="profile.html" title="" class="launch-btn"><i class="ti-user green-text"></i> <span>View Profile</span></a>
					<a href="dynamic-gallery.html" title="" class="launch-btn"><i class="ti-layers purple-text"></i> <span>Gallery</span></a>
					<a href="steps-form.html" title="" class="launch-btn"><i class="ti-panel cyan-text"></i> <span>Steps Form</span></a>
					<a href="tasks.html" title="" class="launch-btn"><i class="ti-view-list-alt red-text"></i> <span>Recent Tasks</span></a>
					<a href="login.html" title="" class="launch-btn"><i class="ti-lock orange-text"></i> <span>Sign Out</span></a>
				</div>
			</div><!-- Launcher -->
		</div><!-- Topbar Links -->
	</div><!-- Top Bar -->

	<div class="sidemenu">
		<div class="sidemenu-inner scroll">
			<div class="admin">
				<img src="http://placehold.it/78x78" alt="" />
				<div class="admin-detail">
					<h2>James Baker</h2>
					<a class="dropdown-button" href='#' title="" data-activates='dropdown2'><span class="green"></span> Online <i class="ti-angle-down"></i></a>
					<ul id='dropdown2' class='dropdown-content'>
						<li><a href="#!">Offline</a></li>
						<li><a href="#!">Busy</a></li>
						<li><a href="#!">Away</a></li>
						<li class="divider"></li>
						<li><a href="login.html">Signout</a></li>
					</ul>		
				</div>
			</div><!-- Admin -->

			<nav class="admin-nav">
				<h6>Main</h6>
				<ul>
					<li><a class="waves-effect" href="#" title=""><i class="ti-home red lighten-1"></i> Dashboard</a>
						<ul>
							<li><a href="index.html" title="">Dashboard 1</a></li>
							<li><a href="index2.html" title="">Dashboard 2</a></li>
							<li><a href="index3.html" title="">Dashboard 3</a></li>
							<li><a href="rounded.html" title="">Rounded Version</a></li>
							<li><a href="rtl.html" title="">RTL Version</a></li>
							<li><a href="dark-sidemenu.html" title="">Dark Sidemenu</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="#" title=""><i class="ti-widgetized pink lighten-3"></i> Elements</a>
						<ul>
							<li><a href="charts.html" title="">Charts</a></li>
							<li><a href="contacts.html" title="">Contacts</a></li>
							<li><a href="dynamic-calendar.html" title="">Dynamic Calendar</a></li>
							<li><a href="editor.html" title="">Editor</a></li>
							<li><a href="form-builder.html" title="">Form Builder</a></li>
							<li><a href="forms.html" title="">Forms</a></li>
							<li><a href="icons.html" title="">Icons</a></li>
							<li><a href="icons2.html" title="">Icons 2</a></li>
							<li><a href="maps.html" title="">Maps</a></li>
							<li><a href="profile.html" title="">Profile</a></li>
							<li><a href="steps-form.html" title="">Steps Form</a></li>
							<li><a href="tasks.html" title="">Tasks</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="#" title=""><i class="ti-widgetized blue lighten-3"></i> Features</a>
						<ul>
							<li><a href="accordions.html" title="">Accordions</a></li>
							<li><a href="alerts.html" title="">Alerts</a></li>
							<li><a href="calculator.html" title="">Calculator</a></li>
							<li><a href="forms.html" title="">Forms</a></li>
							<li><a href="modals.html" title="">Modals</a></li>
							<li><a href="#" title=""> Galleries</a>
								<ul>
									<li><a href="simple-gallery.html" title="">Simple Gallery</a></li>
									<li><a href="dynamic-gallery.html" title="">Dynamic Gallery</a></li>
								</ul>
							</li>
							<li><a href="sliders.html" title="">Sliders</a></li>
							<li><a href="sortable.html" title="">Sortable</a></li>
							<li><a href="steps-form.html" title="">Steps Form</a></li>
							<li><a href="syntax.html" title="">Syntax</a></li>
							<li><a href="tour.html" title="">Page Tour</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="#" title=""><i class="ti-email purple lighten-3"></i> Mailbox</a>
						<ul>
							<li><a href="mail.html" title="">Inbox</a></li>
							<li><a href="mail-open.html" title="">Mail Open</a></li>
							<li><a href="compose.html" title="">Compose Mail</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="#" title=""><i class="ti-key orange lighten-2"></i> Login</a>
						<ul>
							<li><a href="login.html" title="">Login</a></li>
							<li><a href="register.html" title="">Register</a></li>
							<li><a href="forget.html" title="">Forget Password</a></li>
						</ul>
					</li>
				</ul>
				<h6>More</h6>
				<ul>
					<li><a class="waves-effect" href="#" title=""><i class="ti-heart red lighten-1"></i> Pages</a>
						<ul>
							<li><a href="404.html" title="">Error 404</a></li>
							<li><a href="blog.html" title="">Blog</a></li>
							<li><a href="blog-detail.html" title="">Blog Detail</a></li>
							<li><a href="tour.html" title="">Page Tour</a></li>
							<li><a href="extra-options.html" title="">Extra Options</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="charts.html" title=""><i class="ti-bar-chart pink lighten-3"></i> Charts</a></li>
					<li><a class="waves-effect" href="#" title=""><i class="ti-image purple lighten-3"></i> Galleries</a>
						<ul>
							<li><a href="simple-gallery.html" title="">Simple Gallery</a></li>
							<li><a href="dynamic-gallery.html" title="">Dynamic Gallery</a></li>
						</ul>
					</li>
					<li><a class="waves-effect" href="contacts.html" title=""><i class="ti-user blue lighten-3"></i> Contacts</a></li>
					<li><a class="waves-effect" href="extra-options.html" title=""><i class="ti-crown orange lighten-2"></i> Extra Options</a></li>
				</ul>
			</nav>
		</div>
	</div><!-- Sidemenu -->

	<div class="content-area">
		<div class="breadcrumb-bar">
			<div class="page-title">
				<h1>Steps Form</h1>
				<span>Extra Ordinary Features Rich Step Form</span>
			</div>

			<form class="search-admin waves-effect">
				<input type="text" placeholder="Enter Keyword To Search..." />
				<button><i class="ti-search"></i></button>
			</form>

			<ul class="admin-breadcrumb">
				<li><a href="#" title="">Dashboard</a></li>
				<li><a href="#" title="">Pages</a></li>
				<li>Steps Form</li>
			</ul>
		</div><!-- Breadcrumb Bar -->

		<div class="widgets-wrapper">
			<div class="row">
				<div class="masonary">

					<div class="col s12">
						<div class="widget z-depth-1">
							<div class="loader"></div>								
							<div class="widget-title">
								<h3>Steps Form</h3>
								<p>Completely Functional Steps Form</p>
								<a class="options dropdown-button waves-effect" href="#" title="" data-activates='dropdown3'><i class="ti-more-alt"></i></a>
								<ul id='dropdown3' class='dropdown-content'>
									<li><a class="rld" href="#!" title="">Reload</a></li>
									<li><a class="fl-scr" href="#!" title="">Full Screen</a></li>
									<li><a class="rmv" href="#!" title="">Remove</a></li>
								</ul>
							</div>

							<form id="example-form" action="#">
								<div>
									<h3>Account</h3>
									<section>
										<div class="input-field">
											<label for="userName">User name *</label>
											<input id="userName" name="userName" type="text" class="required">
										</div>
										<div class="input-field">
											<label for="password">Password *</label>
											<input id="password" name="password" type="email" class="required">
										</div>
										<div class="input-field">
											<label for="confirm">Confirm Password *</label>
											<input id="confirm" name="confirm" type="text" class="required">
										</div>
										<p>(*) Mandatory</p>
									</section>
									<h3>Profile</h3>
									<section>
										<div class="input-field">
											<label for="name">First name *</label>
											<input id="name" name="name" type="text" class="required">
										</div>
										<div class="input-field">
											<label for="surname">Last name *</label>
											<input id="surname" name="surname" type="text" class="required">
										</div>
										<div class="input-field">
											<label for="email">Email *</label>
											<input id="email" name="email" type="text" class="required email">
										</div>
										<div class="input-field">
											<label for="address">Address</label>
											<input id="address" name="address" type="text">
										</div>
										<p>(*) Mandatory</p>
									</section>
									<h3>Hints</h3>
									<section>
									<ul>
										<li>Foo</li>
										<li>Bar</li>
										<li>Foobar</li>
									</ul>
									</section>
									<h3>Finish</h3>
									<section>
										<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
									</section>
								</div>
							</form>
						</div><!-- Widget -->
					</div>



				</div>
			</div>

		</div>
	</div><!-- Content Area -->

					


 	<script src="js/jquery.min.js"></script>
  	<script src="js/jquery.steps.min.js"></script>
 	<script src="js/materialize.min.js"></script>
 	<script src="js/enscroll-0.5.2.min.js"></script>
 	<script src="js/animate-headline.js"></script>
  	<script src="js/slick.min.js"></script>
	<script src="js/script.js" type="text/javascript"></script>
 	<script src="js/isotope.js"></script>
 	<script type="text/javascript">
 		



    var form = $("#example-form");
    form.validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
    confirm: {
    equalTo: "#password"
    }
    }
    });
    form.children("div").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanging: function (event, currentIndex, newIndex)
    {
    form.validate().settings.ignore = ":disabled,:hidden";
    return form.valid();
    },
    onFinishing: function (event, currentIndex)
    {
    form.validate().settings.ignore = ":disabled";
    return form.valid();
    },
    onFinished: function (event, currentIndex)
    {
    alert("Submitted!");
    }
    });




 	</script>
</body>
</html>





